@page "/scheduler/event-template"

@using Syncfusion.Blazor.Schedule
@using System.Globalization
@inject Microsoft.AspNetCore.Components.NavigationManager UriHelper

@inherits SampleBaseComponent;

<SampleDescription>
  <p>This demo showcases the way of customizing the look of events that are displayed on Schedule. Any kind of text, images and links can be added to customize the look of the events. Here, the webinar sessions on specific topic that are scheduled on respective week days have been displayed on Scheduler across its respective time duration. </p>  
</SampleDescription>
<ActionDescription>
   <p>With the usage of template, the user can format and change the default appearance of the events by using the <code>Template</code> option which is available within the <code>EventSettings</code> property. Here, the HTML template design is compiled and then the resultant output will be displayed directly on the events.</p>
</ActionDescription>

<div class="control-section">
    <div class="content-wrapper">
        <SfSchedule TValue="ScheduleData.WebinarData" Width="100%" Height="650px" @bind-SelectedDate="@CurrentDate">
            <ScheduleViews>
                <ScheduleView Option="View.Week">
                    <EventTemplate>
                        @{
                            var webinarData = (context as ScheduleData.WebinarData);
                                                <div class='template-wrap' style='background:@(webinarData.SecondaryColor)'>
                                                    <div class="subject" style='background:@(webinarData.PrimaryColor)'>@(webinarData.Subject)</div>
                                                    <div class="time" style='background:@(webinarData.PrimaryColor)'>Time: @(getTimeString(webinarData.StartTime)) - @(getTimeString(webinarData.EndTime))</div>
                                                    <div class="image">
                                                        @if (webinarData.ImageName != null) {
                                                            <img src="@UriHelper.ToAbsoluteUri($"images/scheduler/{webinarData.ImageName}.svg")" alt="@webinarData.ImageName" />
                                                        }
                                                    </div>
                                                    <div class="description">@(webinarData.Description)</div>
                                                    <div class="footer" style='background:@(webinarData.PrimaryColor)'></div>
                                                </div>
                        }
                    </EventTemplate>
                </ScheduleView>
                <ScheduleView Option="View.TimelineWeek">
                    <EventTemplate>
                        @{
                            var webinarData = (context as ScheduleData.WebinarData);
                            <div class='template-wrap' style='background:@(webinarData.PrimaryColor)'>
                                <div class="subject" style='background:@(webinarData.SecondaryColor); border-left: 15px solid @(webinarData.PrimaryColor);border-right: 15px solid @(webinarData.PrimaryColor);'>@(webinarData.Subject)</div>
                            </div>
                        }
                    </EventTemplate>
                </ScheduleView>
            </ScheduleViews>
            <ScheduleEventSettings TValue="ScheduleData.WebinarData" DataSource="@DataSource">
            </ScheduleEventSettings>
        </SfSchedule>
    </div>
</div>
@code{
    public DateTime CurrentDate = new DateTime(2020, 1, 16);
    List<ScheduleData.WebinarData> DataSource = new ScheduleData().GetWebinarData();
    public static string getTimeString(DateTime date)
    {
    return date.ToString("HH:mm", CultureInfo.InvariantCulture);
    }
}
<style>
    .e-schedule .e-vertical-view .e-content-wrap .e-appointment,
    .e-schedule .e-timeline-view .e-content-wrap .e-appointment {
        border-radius: 8px;
    }

        .e-schedule .e-vertical-view .e-content-wrap .e-appointment .e-appointment-details {
            padding: 0;
            height: 100%;
        }

    .e-schedule .e-blazor-template {
        height: 100%;
    }

    .e-schedule .template-wrap {
        height: 100%;
        white-space: normal;
    }

        .e-schedule .template-wrap .image {
            padding: 8px 0 4px;
        }

            .e-schedule .template-wrap .image img {
                height: 100%;
                width: 100%;
                padding: 10px 25%;
            }

        .e-schedule .template-wrap .subject {
            font-weight: 600;
            font-size: 15px;
            padding: 4px 4px 4px;
            height: 25px;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }

        .e-schedule .template-wrap .time {
            height: 50px;
        }

        .e-schedule .template-wrap .time,
        .e-schedule .template-wrap .description {
            font-size: 12px;
            padding: 4px 6px 4px;
            overflow: hidden;
        }

        .e-schedule .template-wrap .footer {
            position: absolute;
            bottom: 0;
            height: 50px;
            width: 100%;
        }

    .e-schedule .e-timeline-view .e-appointment .e-appointment-details {
        padding: 0;
        height: 100%;
        width: 100%;
    }

    .e-schedule .e-timeline-view .e-blazor-template,
    .e-schedule .e-timeline-view .template-wrap {
        width: 100%;
    }

        .e-schedule .e-timeline-view .template-wrap .subject {
            font-size: 16px;
            height: 36px;
            text-align: center;
        }
</style>
